<template>
  <div>
    <el-dialog
      :title="$t('libraryManagement.select')"
      v-model="visibleDialog"
      width="700px"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeClick"
      @open="open"
    >
      <div class="dialog_body">
        <div class="dialog_box left_box">
          <el-table :data="list" style="width: 100%" height="460px" v-loading="pageLoading" @row-dblclick="tableRowDbClick">
            <el-table-column :label="$t('libraryManagement.wikiNames')" prop="">
              <template #default="scope">
                <i class="el-icon-s-data" style="color: #3f74f6"></i>
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-model:current-page="requestParams.page"
            :page-size="requestParams.limit"
            size="small"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
        <div class="dialog_box">
          <el-tag v-for="(item, index) in tableData" :key="index" closable class="tag_class" @close="handleClose(item)">
            <i class="el-icon-s-data"></i>
            <span>{{ item.name }}</span>
          </el-tag>
        </div>
      </div>
      <template #footer>
        <span class="mt-2">
          <el-button @click="closeClick">{{ $t('commen.cancel') }}</el-button>
          <el-button type="primary" @click="confirmClick">{{ $t('commen.confirm') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="LibrarySelect">
import { aiqaDifyDatasets } from '@/api/know/wikiApps/indexApi';

const pageLoading = ref(false);
const visibleDialog = ref(false);
const list = ref([]);
const tableData = ref([]);
const requestParams = ref({
  page: 1,
  limit: 10
});
const total = ref();

const emit = defineEmits(['confirm']);

const open = () => {
  getList();
};

const getList = () => {
  pageLoading.value = true;
  aiqaDifyDatasets({
    page: requestParams.value.page,
    limit: requestParams.value.limit
  }).then((res: any) => {
    pageLoading.value = false;
    list.value = res.data;
    total.value = res.total;
  });
};
const handleCurrentChange = (val: any) => {
  requestParams.value.page = val;
  getList();
};
// 双击表格
const tableRowDbClick = (row: any) => {
  const existingItem = tableData.value.find((item: any) => item.id === row.id);

  if (!existingItem) {
    tableData.value.push(row);
  }
};

// 删除tag
const handleClose = (tag) => {
  tableData.value.splice(tableData.value.indexOf(tag), 1);
};

const closeClick = () => {
  visibleDialog.value = false;
  tableData.value = [];
};

const confirmClick = () => {
  emit('confirm', tableData.value);
  closeClick();
};

defineExpose({
  visibleDialog,
  tableData
});
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 15px 20px;
}

.dialog_body {
  display: flex;
}

.dialog_box {
  flex: 1;
  margin: 0 5px;
  height: 501px;
  overflow-y: auto;
  // border: 1px solid #eee;
}

.left_box {
  border-right: 1px solid #eee;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
}

.tag_class {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
